<template>
  <el-icon :size="16"><List /></el-icon>
  <span style="font-weight: 600;font-size: 16px;">商品信息</span>
  <el-table :border="true" style="margin:20px 0" :data="prop.goodsInfo">
    <el-table-column label="商品图片" prop="productPic">
      <template #default="scoped">
        <el-image :src="scoped.row.productPic" style="width: 50px;height: 50px;"/>
      </template>
    </el-table-column>
    <el-table-column label="商品名称">
      <template #default="scoped">
        <div>{{scoped.row.productName}}</div>
        <div>{{ scoped.row.productBrand }}</div>
      </template>
    </el-table-column>
    <el-table-column label="价格/货号">
      <template #default="scoped">
        <div>价格：￥{{ scoped.row.productPrice }}</div>
        <div>货号：￥{{ scoped.row.productSn }}</div>
      </template>
    </el-table-column>
    <el-table-column label="属性">
      <template #default="scoped">
        <span v-for="item in strObj(scoped.row.productAttr)">
          {{ item.key }}:{{ item.value }};
        </span>
      </template>
    </el-table-column>
    <el-table-column label="数量" prop="productQuantity"></el-table-column>
    <el-table-column label="小计">
      <template #default="scoped">
        ￥{{ scoped.row.productPrice * scoped.row.productQuantity }}
      </template>
    </el-table-column>
  </el-table>
  <div style="overflow: hidden;">
  <div style="float:right;">
    合计：<span style="color:#f56c6c">￥{{ total }}</span>
  </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
let prop = defineProps<{
  goodsInfo:[{
    productPic:string,
    productName:string,
    productBrand:string,
    productPrice:string,
    // 货号
    productSn:string,
    // 商品属性，json格式，需要转换
    productAttr:string,
    // 数量
    productQuantity:number,
  }]
}>()

// json转字符串
let strObj = computed(()=>{
  return (str:any):[{key:string,value:string}] | []=>{
    if(str){
       return JSON.parse(str)
    }else{
      return []
    }
   
  }
})
// 总价
let total = computed(()=>{
  return prop.goodsInfo.reduce((pre:number,curr:any)=>{
    return pre+curr.productPrice*curr.productQuantity
  },0)
})
</script>